<template>
	<div id="materialEdit">
		<view class="nav-box">
			<view class="nav-box-text">
				<image src="@/static/img/home/person.png" class="person"></image>
				<view class="welcome">
					<view><text>姓名：{{userInfo.nickName}}</text></view>
					<view><text>单位：{{userInfo.dept.deptName}}</text></view>
				</view>
			</view>
		</view>
		<view class="project">
			<text>{{projectInfo.name}}</text>
		</view>
		<view class="uni-list">
			<uni-forms ref="form" :rules="rules" :modelValue="form">
				<uni-forms-item label="进场日期" name="inspectDate" required>
					<uni-datetime-picker v-model="form.inspectDate" :border="false" type="date" :disabled="Type =='2'" />
				</uni-forms-item>
				<uni-forms-item name="files" label="上车照"  :id=" Type=='2'?'hinde':''" required>
					<uni-group>
						<uni-file-picker file-mediatype="image" :readonly="Type =='2'" v-model="form.busFile" limit="9"
							@delete="(e)=>{return delets(e)}" @select="e=>{return detailUpload(e)}"></uni-file-picker>
					</uni-group>
				</uni-forms-item>
                <uni-forms-item name="files" label="检测中心照"  :id=" Type=='2'?'hinde':''" required>
					<uni-group>
						<uni-file-picker file-mediatype="image" :readonly="Type =='2'" v-model="form.testingCenterFile" limit="9"
							@delete="(e)=>{return delet2s(e)}" @select="e=>{return detailUpload2(e)}"></uni-file-picker>
					</uni-group>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view style="height: 60px;"></view>
		<view class="bottom-nav">
			<button type="primary" :loading="loading"  size="mini" class="btn"  :disabled="!Btn"
				@click="save(1)">提交</button>
			<button type="primary" :loading="loading" size="mini" class="btn"  @click="Return()" >返回</button>
		</view>

	</div>
</template>

<script>
	import {
		addMaterial,
		inquirestaff,
		viewDetails,
		updateMaterial,
        submitPmToInspect
	} from '@/api/material/index.js'
	import {
		imgUpload,
	} from '@/api/inspection/index.js'
	import {decrypt} from '@/common/jsencrpty.js'
	
	export default {
		data() {
			return {
				Btn:true,
				table:[],
				usersIndex: '',
				showFul:false,
				Type: '', //判断编辑详情
				staff: [],
				staff1: [],
				usersIndex: 0,
				files: [],
				userInfo: [],
				projectInfo: [],
				roleStatus: '',
				loading: false,
				form: {
					inspectDate: '',
					busFile: [],
					testingCenterFile:[],
				},
				// 验证
				rules: {
					
					inspectDate: {
						rules: [{ required: true, errorMessage: '请选择送检日期' }]
					},
					busFile: {
						rules: [{ required: true, errorMessage: '请选择上车照' }]
					},
                    testingCenterFile: {
						rules: [{ required: true, errorMessage: '请选择检测中心照' }]
					}
				}
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.userInfo = uni.getStorageSync('userInfo')
			this.userInfo.nickName = decrypt(this.userInfo.nickName)
			this.projectInfo = uni.getStorageSync('projectInfo')
		},
		methods: {
			//图片预览
			preView(url){
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = url
				uni.previewImage({
				current: 0,
				urls: imgsArray,
				});
			},
			delets(e) {
				let index = this.form.busFile.indexOf(e.tempFile)
				this.form.busFile.splice(index, 1)

			},
            delet2s(e) {
				let index = this.form.testingCenterFile.indexOf(e.tempFile)
				this.form.testingCenterFile.splice(index, 1)

			},
			async save(e) {
				this.$refs['form'].validate().then(res=>{
					this.handleyz(e)
				})
			}, 
			async handleyz(e){
					const row = await submitPmToInspect({
						"inspectDate": this.form.inspectDate,
						"busFile": this.form.busFile.map((v) => v.id).join(','), 
                        "testingCenterFile": this.form.testingCenterFile.map((v) => v.id).join(','), 
					})
					if (row.code = 200) {
                        uni.showToast({
								title: '提交成功',
							})
						uni.navigateBack();
					}
			},
			Return() {
				uni.navigateBack()
				// uni.navigateTo({
				// 	url: '/pages/material/index'
				// })
			},
		
			detailUpload2(e) {
				var that = this
				that.Btn=false
				e.tempFilePaths.forEach(res => {
					imgUpload(res).then(item => {
						let datas = JSON.parse(item)
						if (datas.code == 200) {
							uni.showToast({
								title: '图片上传成功',
							})
							this.form.testingCenterFile.push({
								id: datas.data.id,
								url: datas.data.url
							})
							that.Btn=true
						} else {
							uni.showToast({
								title: datas.msg,
							})
						}
					})
				})
			},
            detailUpload(e) {
				var that = this
				that.Btn=false
				e.tempFilePaths.forEach(res => {
					imgUpload(res).then(item => {
						let datas = JSON.parse(item)
						if (datas.code == 200) {
							uni.showToast({
								title: '图片上传成功',
							})
							this.form.busFile.push({
								id: datas.data.id,
								url: datas.data.url
							})
							that.Btn=true
						} else {
							uni.showToast({
								title: datas.msg,
							})
						}
					})
				})
			},
		},
		mounted() {
		}
	}
</script>
<style lang="scss" scoped>
	.tables{
		.Img{
			width: 12%;
		}
		margin-top: 9.12rpx;
		padding: 0rpx 18.24rpx;
		image{
			width: 80rpx;
			height: 80rpx;
		}
	}
	.is-required {
		color: #f00;
		font-weight: bold;
	}
	.slot-box {
		color: #333;
		width: 70px;
		font-size: 14px;
	}
	.tree-select {
		flex: 1;
		color: grey;
		font-size: 14px;
	}
	#materialEdit {
		min-height: 100vh;
		background-color: #fafafa;

		.nav-box {
			width: 100vw;
			height: 160px;
			margin-top: -44px;
			padding: 56px 20px 56px 20px;
			background-image: url(../../static/img/home/head-bg.png);

			.nav-box-text {
				height: 50px;
				display: flex;
				align-items: center;

				.person {
					width: 48px;
					height: 48px;
				}

				.welcome {
					color: #333;
					font-size: 32rpx;
					margin-left: 40rpx;
				}
			}
		}

		.project {
			padding: 10px;
			border-radius: 8px;
			background-color: #fff;
			margin: -32px 20px 0 20px;
			box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .1);

			text {
				font-size: 14px;
				font-weight: 700;
			}
		}

		.uni-list {
			background-color: #fff;
			margin: 10px 20px 0 20px;
			box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .1);

			/deep/ .uni-forms-item__inner {
				padding: 0 10px;
				border-bottom: 1rpx solid #bfbfbf;
			}

			/deep/ .uni-error-message {
				right: 0;
				left: auto;
				margin-right: 5px;
			}

			/deep/ .uni-date__x-input {
				height: 36px;
				line-height: 36px;
			}

			/deep/ .uni-group {
				margin-top: 0 !important;
			}

			.uni-forms-item {

				&:last-child {
					/deep/ .uni-forms-item__inner {
						border-bottom: 0;
					}
				}
			}
		}

		.bottom-nav {
			display: flex;
			align-items: center;
			left: 0;
			bottom: 0;
			width: 100vw;
			height: 50px;
			padding: 10px;
			position: fixed;
			background-color: #fff;
			box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, .1);
		}

		.runxx {
			display: flex;
			align-items: center;
		}
	}
	.img1{
		height: 40rpx;
		width: 40rpx;
		img{
		height: 100%;
		width: 100%;
		}
	}
	#hinde{
		::v-deep .is-add{
			display: none!important;
		}
	}
</style>
